<script type="es6">
    export default {
        name: "descriptions",
        componentName: 'descriptions',
        props: {
            title: {
                type: String,
                default: ''
            },
            border: {
                type: Boolean,
                default: false
            },
            column: {
                type: Number / String,
                default: 2
            },
            labelWidth: {
                type: String,
                default: ''
            },
            hideBorderBottom: {
                type: Boolean,
                default: false
            },
            separator: {
                type: String,
                default: ""
            }
        },
        data() {
            return {}
        },
        mounted() {
            let row = document.querySelectorAll('.ep-descriptions__row');
            for (let i = 0; i < row.length; i++) {
                row[i].innerHTML.replace(/<\/?div[^>]*>/ig, '');
            }
        },
        methods: {
            //获取单元格规则
            getColSpan(trList){
                let tr = []
                trList.reduce((current,item,index)=>{
                    let obj = current;
                    let itemSpan = Number(item.componentOptions.propsData.span!==undefined?item.componentOptions.propsData.span:1);
                    // console.log('item.componentOptions.propsData.label',item.componentOptions.propsData.label)
                    // console.log('item.componentOptions.propsData.span',item.componentOptions.propsData.span)
                    if(obj.span + itemSpan===Number(this.column)){
                        tr.push(trList.slice(obj.index,index+1));
                        obj.span = 0;
                        obj.index = index+1;
                    }else if(obj.span + itemSpan>Number(this.column)){
                        tr.push(trList.slice(obj.index,index));
                        obj.span = itemSpan;
                        obj.index = index;
                    }else{
                        obj.span += itemSpan;
                        if(index===trList.length-1){
                            tr.push(trList.slice(obj.index,index+1));
                        }
                    }
                    return obj
                },{index:0,span:0})
                return tr
            }
        },
        render(h) {
            const slots = this.$slots.default;
            if (!slots) return null;
            let arr = slots.filter(item => {
                return item.tag
            });
            let tr = this.getColSpan(arr);
            return h('div', {
                class: {
                    'ep-descriptions': true,
                    'ep-descriptions__border': this.border,
                    'ep-descriptions__border-bottom': !this.hideBorderBottom
                }
            }, [
                h('div', {
                    class: 'ep-descriptions__title',
                    style: {
                        display: this.title ? '' : 'none'
                    }
                }, [
                    h('span', this.title)
                ]),
                h('div', {
                    class: 'ep-descriptions__view'
                }, [
                    h('table', [
                        h('tbody', tr.map((item, index) => {
                            return h('tr', {
                                key: index,
                                class: 'ep-descriptions__row',
                            }, item)
                        }))
                    ])
                ])
            ])
        }
    }
</script>

<style lang="less">
    .ep-descriptions {
        position: relative;
        &__border-bottom {
            border-bottom: 1px #e8e8e8 solid;
        }

        &__border-bottom:last-child {
            border-bottom: none;
        }

        &__title {
            color: rgba(0, 0, 0, 0.85);
            font-weight: bold;
            font-size: 14px;
            padding: 12px 0;
            position: relative;

            &:before {
                content: '·';
                position: absolute;
                top: 4px;
                left: 0;
                width: 5px;
                height: 5px;
                color: #0099ff;
                font-size: 34px;
            }

            span {
                padding-left: 15px;
            }
        }

        &__view {
            width: 100%;
            overflow: hidden;

            table {
                width: 100%;
                table-layout: fixed;
            }
        }

        &__row {
            padding-bottom: 10px;
        }

        &__flex {
            display: flex;
            align-items: center;
        }

        &__item {
            padding-bottom: 10px;

            &-cell-inline {
                width: 100%;
                display: flex;
            }

            &-cell {
                margin-bottom: 10px;
            }

            &-label {
                color: #999;
                font-weight: normal;
                font-size: 14px;
                line-height: 1.5;
                width: 70px;
                padding-right: 8px;
            }
            &-content {
                flex: 1;
                display: table-cell;
                color: #333;
                font-size: 14px;
                line-height: 1.5;
                word-break: break-all;
            }

            &-cell > span {
                display: inline-block;
            }
        }
    }

    .ep-descriptions__border {
        .ep-descriptions__view {
            table {
                table-layout: auto;
                border-collapse: collapse;
                border-width: 1px 0 0 0;
                border-color: #217f7d;
                border-style: solid;
            }
        }

        .ep-descriptions__row {
            display: flex;
            padding-bottom: 0;
        }

        .ep-descriptions__item {
            padding-bottom: 0;
        }

        .ep-descriptions__cell {
            display: flex;
            border-bottom: 1px solid #217f7d;
        }

        .ep-descriptions__item-label {
            min-width: auto;
        }

        .ep-descriptions__item-label, .ep-descriptions__item-content {
            padding: 10px 24px;
            /*border-right: 1px solid #e8e8e8;*/
        }

        .ep-descriptions__item-content {
            flex: 1;
            color:#cfe9ff;
        }

        .ep-descriptions__item-label {
            background-color: rgba(41, 165, 165, 0.3);
            color:#cfe9ff;
        }

        .ep-descriptions__item-label::after {
            content: ' ';
        }
    }

</style>
